<!--搜索页面-->
<template>
  <div class="MainPageHeader">
    <div class="searchAction">
      <div class="searchActionMain">
        <div class="searchMain">
          <div class="searchImage">
            <img src="../../assets/Img/Icon/search.png" alt="">
          </div>
          <div class="searchInputBox">
            <div class="searchInputMain">
              <input type="text" class="inputType" v-model="searchData" placeholder="请输入关键字后开始查找" />
            </div>
          </div>
          <div class="searchBtn" @click="judgeSearch">搜索</div>
        </div>
        <div class="searchResult" :class="{ addSearchResultHeight: getSearchResultLength === 0 }">
          <div class="searchResultNumber" :class="{ searchResultNumberShow: getSearchResultLength !== 0 }">
            共计&nbsp;{{ getSearchResultLength }}&nbsp;&nbsp;条</div>
          <!--大于6条时开启over-flow窗口滚动-->
          <div class="serachResultBox" :class="{ searchOverflow: getSearchResultLength > 6 }" v-loading="loading"
            element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <div class="resultItem" v-for="searchItem in searchResultList" :key="searchItem.id"
              @click="gotoSearchPage(searchItem)">
              <a href="javascriot:;"
                :title="searchItem.introduction === undefined ? searchItem.name : searchItem.introduction"
                v-html="searchItem.name" class="resultData"></a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="videoRecommend">
      <div class="recommendTitle">
        <div class="titleinfo">个人推荐</div>
      </div>
      <div class="videoRecommendList" v-if="isShowRecommendList">
        <div class="userNotLogin">暂无个人推荐,请登录系统后进行查看</div>
      </div>
      <div class="videoRecommendList" v-else>
        <ul class="recommendBox clearfix">
          <li class="course-item" v-for="(childItem, index) in videoRecommendList" :key="index"
            @click="gotoVideoPage(childItem.videoId)">
            <div class="course-img">
              <img :src="[publicUrl + childItem.image]" alt="视屏图片">
            </div>
            <div class="course-connect">
              <div class="connect-info">{{ childItem.name }}</div>
              <div class="course-bottom">
                <span>{{ childItem.nickname }}</span>
                <span>{{ childItem.time }}</span>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { getSearchData, getRecommendVideo } from '../../service/systemService'
import { createPublicUrl } from '../../utils/index'
export default {
  name: 'searchView',
  data() {
    return {
      //搜索的内容 
      searchData: '',
      //搜索的结果 
      searchResultList: [],
      //获取推荐视屏的列表 
      videoRecommendList: [],
      //是否显示加载转圈 
      loading: false,
      //显示是否展示推荐列表
      isShowRecommendList: false
    }
  },
  mounted() {
    //页面挂在的时候,判断是否用户从主页携带了输入信息 
    this.judgeSearchData()
    //页面加载的时候判断用户是否登录,若登录才显示个人推荐,反之则不显示 
    this.juegeGetVideoList()
  },
  methods: {
    //获取搜索数据 
    async getSearchList() {
      if (this.searchData === '') {
        this.$message.error('搜索长度不能为空')
        return;
      }
      this.searchResultList = []
      this.loading = true;
      return new Promise((resolve, reject) => {
        //SearchData中的mutation函数 
        this.GETSEARCHDATA(this.searchData)
        getSearchData(this.searchData)
          .then((res) => {
            if (res.data.code === 200) {
              resolve({ flag: true, data: res.data.data })
            } else if (res.data.code === 406) {
              this.$message.error(res.data.message)
              resolve({ flag: false, data: [] })
            }
          }).catch(error => {
            console.log(error);
            reject({ flag: false, data: [] })
          })
      })
    },
    //添加搜索加载,以及判断是否获取
    async judgeSearch() {
      let result
      try {
        result = await this.getSearchList()
        if (result.flag === true) {
          setTimeout(() => {
            this.loading = false
            this.searchResultList = [...result.data.questionList, ...result.data.videoList, ...result.data.collegeList]
          }, 1500)
        } else {
          this.loading = false
        }
      } catch (error) {
        console.log(error);
        this.loading = false
      }
    },
    gotoSearchPage(searchItem) {
      let location = {}
      if (searchItem.questionId !== undefined) {
        location.name = "questionPage"
        location.query = { 'questionId': searchItem.questionId }
      } else if (searchItem.videoId !== undefined) {
        location.name = "videoPage"
        location.query = { 'videoId': searchItem.videoId }
      } else {
        location.name = "schoolPage"
        location.query = { 'collegeId': searchItem.collegeId }
      }
      this.$router.push(location)
    },
    //页面挂在的时候,判断是否用户从主页携带了输入信息 
    judgeSearchData() {
      if (this.$route.params.searchData === undefined || this.$route.params.searchData === '') {
        return;
      } else {
        this.searchData = this.$route.params.searchData
        this.judgeSearch()
      }
    },
    //判断用户是否登录,登录才获取相关列表,反之则不获取 
    juegeGetVideoList() {
      if (sessionStorage.getItem('token') === null) {
        this.isShowRecommendList = true
      } else {
        //若登录则显示列表并获取数据 
        this.isShowRecommendList = false
        this.getVideoList()
      }
    },
    //获取推荐用户的相关视屏
    getVideoList() {
      getRecommendVideo().then((res) => {
        if (res.data.code === 200) {
          this.videoRecommendList = res.data.data
        }
      })
    },
    //用于将修改的信息提交到Vuex中方便组件交流 
    ...mapMutations('searchData', {
      GETSEARCHDATA: 'GETSEARCHDATA'
    })
  },
  computed: {
    //返回搜索结果总条数
    getSearchResultLength() {
      return this.searchResultList.length
    },
    //获取图片存储的公共头
    publicUrl() {
      return createPublicUrl()
    },
    //获取搜索信息,方便两边数据同步展示
    ...mapGetters('searchData', {
      getSearchData: 'getSearchData'
    }),
  }
}
</script>
<style lang="less" scoped>
.searchAction,
.videoRecommend {
  margin: 0 auto;
  padding-top: 10px;
  width: 1200px;

  .searchActionMain {
    margin: 0 auto;
    margin-top: 30px;
    width: 90%;
    height: 100%;

    .searchMain {
      margin-bottom: 10px;

      .searchImage {
        top: 14px;
        left: 14px;
      }

      .searchInputBox {
        .searchInputMain {
          border-radius: 0;
          padding: 10px 0;

          .inputType {
            width: 100%;
            padding-left: 40px;
          }
        }
      }

      .searchBtn {
        width: 100px;
        line-height: 42px;
        padding: 0 20px;
        font-size: 16px;
        color: #ffffff;
        background: #00aeec;
        border: 1px solid #00aeec;
        text-align: center;
        cursor: pointer;
      }
    }

    .searchResult {
      position: relative;
      height: 400px;
      display: flex;
      flex-direction: column;

      .searchResultNumber {
        display: none;
        color: #9499a0;
      }

      .serachResultBox {
        margin-right: 8px;

        .resultItem {
          margin: 5px 0;
          padding: 0 8px;
          height: 36px;
          line-height: 36px;
          border-radius: 8px;
          background: #16161705
        }

        .resultData {
          display: inline-block;
          width: 100%;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;

          ::v-deep span {
            color: #00aeec !important;
          }
        }
      }

      .searchResultNumberShow {
        display: block;
      }

      ::v-deep .el-loading-mask {
        top: 30px;
      }
    }

    .addSearchResultHeight {
      height: 40px;
    }

    .searchOverflow {
      overflow-y: scroll;
    }
  }
}

.videoRecommend {

  // height: 500px;
  .recommendTitle {
    height: 30px;
    line-height: 30px;
  }
}
</style>